<!--
 * @Description: 
 * @Author: wangfuyuan
 * @Email: wangfuyuan@nnuo.com
 * @Date: 2021-09-13 13:19:21
 * @LastEditors: wangfuyuan
 * @LastEditTime: 2021-09-13 13:31:48
 * @FilePath: \node-websocket\src\pages\dan.vue
-->
<template>
  <div class="screen">
    <Star></Star>
    <div class="send">
      <div class="input clearfix">
        <input type="text" class="text" v-model="danmuText" />
        <div class="btn" @click="buibuibui()">发送</div>
      </div>
    </div>
  </div>
</template>

<script>
import Star from "../component/star";
export default {
  name: "dan",
  components: {
    [Star.name]: Star,
  },
  data() {
    return {
      danmuText: "",
    };
  },
  mounted() {
    this.initWebSocket();
  },
  methods: {
    initWebSocket() {
      console.log("initWebSocket");
      const wsuri = "ws://172.30.5.37:8088/"; //ws地址
      // const wsuri = "ws://127.0.0.1:8088/"; //ws地址
      this.websock = new WebSocket(wsuri);
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onclose = this.websocketclose;
    },
    websocketonopen() {
      console.log("WebSocket连接成功");
      // this.websocketsend(JSON.stringify(this.msg));
    },
    websocketonerror(e) {
      //错误
      alert("Webscoket连接发生错误");
      console.log("WebSocket连接发生错误");
    },
    websocketsend(agentData) {
      //数据发送
      this.websock.send(agentData);
    },
    websocketclose(e) {
      //关闭
      console.log("connection closed (" + e.code + ")");
    },
    buibuibui() {
      this.websocketsend(JSON.stringify(this.danmuText));
      this.danmuText = "";
    },
    websocketonmessage(e) {
      //数据接收
      var mes = JSON.parse(e.data);
      this.showDanmu(mes);
    },
    showDanmu(mes) {
      this.dammuFn(mes, this.danmuColor, this.danmuSize, this.dameCheckedValue);
    },
    send() {
      if (this.danmuText !== "") {
        console.log(this.danmuText);
        this.dammuFn(this.danmuText);
      }
    },
    dammuFn(text) {
      console.log(text);
    },
  },
};
</script>
<style scoped lang="less">
.screen {
  margin: 0;
  overflow: hidden;
  cursor: none;
  background: black;
  background: linear-gradient(to bottom, #000000 0%, #5788fe 100%);
  width: 100%;
  height: 100%;
  position: relative;
  & .send {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80px;
    line-height: 80px;
    background-color: rgba(10, 10, 10, 0.6);
    text-align: center;
    .input {
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -20px -350px;
      font-size: 0;
      outline: none;
    }
    .btn {
      float: left;
      width: 100px;
      background-color: black;
      line-height: 40px;
      font-size: 18px;
      color: #fff;
      cursor: pointer;
      border-radius: 0 8px 8px 0;
    }
    .text {
      float: left;
      width: 600px;
      height: 40px;
      border: none;
      border-radius: 8px 0 0 8px;
    }
  }
}
</style>
